Hexo 博客编写技巧

Hexo 的博客编写是使用 markdown 来实现，但在使用上针对页面优化上可以使用一些技巧。本次整理的内容包括两个方面：

1. 文件配置文件的调整
2. markdown 编写过程中的技巧

   1. 配置文件调整

1.1 代码显示配置

调整的配置文件是主题文件夹下的配置文件，例如使用 icarus 主题时，修改的配置文件是 themes/icarus/_config.yml，这里主要针对 markdown 显示的优化。

在配置文件中 article 的小节中可以对 highlight 进行调整，包括从显示的颜色主题，是否显示复制按钮以及是否可以折叠等角度设置:

article:
    highlight:
        # 代码高亮主题，颜色高亮主题的名称可以在下面的链接中找 css 文件名
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-light
        # 显示复制代码按钮
        clipboard: true
        # 代码块的默认折叠状态。可以是"", "folded", "unfolded"
        fold: unfolded

以上方式是全局的方式，定义代码显示的模式。

1.2 文章目录显示

若需要在页面中展示文章目录，一方面需要在 _config.yml 中 widgets 中添加 toc ：

“_config.yml" >unfolded

widgets:
    -
        type: toc
        position: left
 

另一方面需要在 markdown 中设置 front-matter

“_config.yml" >unfolded

---
title: 一篇有目录的文章
toc: true
---

 

2. markdown 编写技巧

整体上来说，直接在 markdown 中调整显示属性的优先级要高于 page 配置选项（可以在主题下添加一个 _config.page.yml 进行设置），且高于默认配置选择（即 _config.yml 中的配置，前面的 _config.page.yml 配置又高于 _config.yml）。[^1]

2.1 代码高亮

对于高亮配置可以在 front-matter 中设置:

---
title: 文章
date: '2015-01-01 00:00:01'
article:
    highlight:
        theme: ocean
---
# title

2.2 代码块显示定制化

针对某些特定场景下需要对某些代码块进行定制化，例如设置一个文件名，折叠状态时，可以通过使用 codeblock 的方式完成。例如需要设置代码块的来自文件 test.sh，使用的语言是 bash：

可以使用模版模式定制化显示代码块——显示文件名，语言类型，直接显示是否折叠。下面的例子表示使用的是 bash ，使用文件名为 test.sh，初始状态为 folded（可以使用空字符串或者 unfolded）

{% codeblock "test.sh" lang:bash >folded %}
   # mac 通过 homebrew 进行安装
   $ brew install node

   # 检查是否安装正确，分别显示 node 和 npm 的版本
   $ node -v
   v12.18.2
   $ npm -v
   6.14.5
   # 安装 hexo 框架
   $ npm install -g hexo-cli

   # 检查 hexo 安装是否正确
   $ hexo -v

   # 为了部署的时候使用 git ，可以在这里安装上 hexo-deployer-git
   $ npm install --save hexo-deployer-git
 {% endcodeblock %}

通过以上方式得到的现实结果如下：

test.sh >folded

# mac 通过 homebrew 进行安装
$ brew install node

# 检查是否安装正确，分别显示 node 和 npm 的版本
$ node -v
v12.18.2
$ npm -v
6.14.5
# 安装 hexo 框架
$ npm install -g hexo-cli

# 检查 hexo 安装是否正确
$ hexo -v

# 为了部署的时候使用 git ，可以在这里安装上 hexo-deployer-git
$ npm install --save hexo-deployer-git
 

2.2 封面和缩略图使用

在某些场景下需要使用添加文章封面或者文章缩略图，可以在 front-matter 中设置 cover 和 thumbnail 值：

---
title: 封面图和缩略图使用
cover: /gallery/covers/cover.jpg # cover 设置封面图
thumbnail: /gallery/thumbnails/thumbnail.jpg # thumbnail 设置缩略图
---

参考

[^1]: Icarus用户指南 - 主题配置